<template>
    <div>
  <div class="box">
    <div>
      <span class="txt1">请选择商品分类：</span>
      <el-select v-model="query.category" clearable placeholder="全部">
        <el-option
          v-for="item in categorys"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </div>
    <span class="txt1">筛选：</span>
    <div class="box1">
      <el-input
        v-model="query.search"
        
        placeholder="请输入筛选条件"
      />
    </div>
    <div class="box2">
        <el-button type="primary" @click="searchFn">查询</el-button>
<!-- 
      <el-button ></el-button> -->
    </div>
  </div>
  <div class="box4">
  <el-table :data="list" stripe style="width: 100%" v-loading="loading">
    <el-table-column prop="proid" label="商品编号" width="180" />
    <el-table-column  label="商品图片" width="180" >
            <template #default="scope">
                <img class="img" :src="scope.row.img2" />
            </template>
    </el-table-column>
    <el-table-column prop="proname" label="商品名称" width="180" />
    <el-table-column prop="brand" label="商品品牌" width="180" />
    <el-table-column prop="originprice" label="商品价格" width="180" />
    <el-table-column prop="discount" label="商品折扣" width="180" />
    <el-table-column prop="sales" label="商品销量" width="180" />
    <el-table-column prop="stock" label="商品库存" />
  </el-table>
</div>
</div>
</template>

<script setup lang="ts">
import service from "../../../untils/service";
import { reactive,ref } from "vue";
import { Loading } from "@element-plus/icons-vue";
const categorys = reactive<string[]>([]);
// 获取商品分类
let loading = ref(true)
const getCategorys = () => {
  service({
    url: "/pro/getCategory",
  }).then((res) => {
    if (res.data.code == "200") {
      categorys.length = 0;
      categorys.push(...res.data.data);
    }
  });
};
getCategorys();

const query = reactive<{
  category?: string;
  search?: string;
}>({
  category: "",
  search: "",
});

interface IGoods {
    brand: string,
    category: string,
    desc: string,
    discount: number,
    img2: string,
    isrecommend: number,
    issale: number,
    isseckill: number,
    originprice: number,
    proid: string,
    proname: string,
    sales: number,
    stock: number
}

// 获取筛选商品列表
 const list = reactive<IGoods[]>([])

 const searchFn = () => {
    service({
        url:'/pro/searchPro',
        method:'post',
        data:`category=${query.category}&search=${query.search}`  // 筛选条件
    }).then(res => {
        if(res.data.code == '200') {
            list.length = 0
            list.push(...res.data.data)
            loading.value=false
        }

    })
    
 }
 searchFn(); 
</script>

<style scoped>
.txt1 {
  font-size: 15px;
  font-weight: bold;
  margin-left: 40px;
}

.box1 {
  width: 198px;
  height: 30px;
}

.box {
  display: flex;
  align-items: center;
}

.box2 {
  margin-left: 50px;
}
.box4 {
    margin-top: 40px;
}
.img {
    width: 100px;
    height: 100px;
}
</style>